<template>
  <div>
    <!-- <van-nav-bar fixed title="支付" left-arrow @click-left="$utils.back($route.path);" /> -->
    <div class="pt-20 fs-28 content-box">
      <div class=" bg-white mtb-20 mlr-25 br-12 fs-26 ofh">
        <div class="pd-30 bg-gray flex-s-c">
          <div>
            <p class="fs-28 color-gray-light">付款给</p>
            <p class=" fs-32 fw-500">{{ storeInfo.storeName }}</p>
          </div>
          <head-portraitBox
            class="is-80 br-4 mb-10"
            :head-portrait-url="storeInfo.logo"
          />

        </div>
        <div class="pd-30">
          <!-- <div class="tac fles-32" @click="removeCookie">清除cookie</div> -->
          <p class="color-gray">订单金额</p>
          <div class="fs-60 input-box mt-30 pb-30 " style="border-bottom:1px solid #ebedf0">
            <!-- <input ref="mInput" v-model="price" readonly type="text" placeholder="请输入订单金额" @input="input" @blur="blur"> -->
            <div class="input" @click="focusStatus=true">
              <span :class="focusStatus?'focus':''">{{ price }}</span>
              <span v-show="!price" class="color-shadow">请输入订单金额</span>
            </div>
          </div>
          <p class="lh-110 flex-s-c color-danger" style="border-bottom:1px solid #ebedf0" @click="openCouponList()">
            <span class="color-gray">选择优惠</span>
            <span class="arrow arrow1">{{ couponValue||"选择优惠券" }}</span>
          </p>
          <p class="flex-s-c color-gray mt-30">实付金额</p>
          <p class="tac fs-60 mt-40 mb-30 lh-xxs pos-r" :class="price?'':'color-gray-light'">
            <span class="fs-40 pos-r top--10 dis-inb">￥</span>
            <span>{{ priceSum }}</span>
          </p>
        </div>
      </div>
      <div class="mt-20 mlr-25 br-12 bg-white plr-30">
        <p class="lh-110 flex-s-c" style="border-bottom:1px solid #ebedf0">
          <span class="color-gray">我的{{ $IntegralAlias||"积分" }}</span>
          <span class="color-dark">{{ integral }}</span>
        </p>
        <p class="lh-110 flex-s-c" @click="openPayWay">
          <span class="color-gray">付款方式</span>
          <span class="color-dark arrow arrow1 flex-v-c"><SvgIcon :icon-class="payWayIcon" class="mr-10 fs-40" />{{ payWayName }}</span>
        </p>
      </div>
    </div>

    <!-- 数字键盘 -->
    <keyborad :price="price" @changeNum="input" @confirmEvent="addOrder" />

    <!-- 优惠券s -->
    <van-popup
      v-model="showCoupon"
      position="bottom"
    >
      <div class="coupon-box">
        <h1 class="tac fs-32 fw-b mtb-15">优惠券</h1>
        <van-tabs v-model="active" animated>
          <van-tab :title="'未使用(' + userCouponNum + ')'">
            <van-radio-group v-model="userCouponListRadio">
              <ul class="coupon-list mg-30 mb-0">
                <li
                  v-for="(item, index) in userCouponList"
                  :key="index"
                  class="coupon-item mb-30 flex-s-c"
                  @click="userCouponListRadio = index"
                >
                  <div class="item flex-s-c flex-1 br-12" :style="{backgroundImage:'url('+require('@/assets/images/coupon-li-bg.png')+')'}">
                    <div class="left-box  fs-72   flex-center ">
                      <div v-show="item.PrivilegeWay!==0" class="tac">
                        <span>{{ parseInt(item.PrivilegeValue) }}</span>
                        <span v-show="item.PrivilegeValue%1" class="fs-24">.{{ $utils.get_decimal(item.PrivilegeValue) }}</span>
                        <span class="fs-24">元</span>
                        <p v-show="item.OrderPrice" class="fs-24 mt--20">满{{ item.OrderPrice }}元使用</p>
                      </div>
                      <div v-show="item.PrivilegeWay===0" class="tac">
                        <span>{{ parseInt(item.PrivilegeValue/10) }}</span>
                        <span v-show="(item.PrivilegeValue/10)%1" class="fs-24">.{{ $utils.get_decimal(item.PrivilegeValue/10) }}</span>
                        <span class="fs-24">折</span>
                        <p v-show="item.OrderPrice" class="fs-24 mt--20">满{{ item.OrderPrice }}元使用</p>
                      </div>
                    </div>
                    <div class="right-box flex-s-c flex-1 pl-30 pr-20 pos-r">
                      <div>
                        <h2 class="fs-32 fw-b lh text-show-line-1">{{ item.Name }}</h2>
                        <p v-show="!item.ProductCategoryIds&&!item.ProductIds&&!item.StoreIds" class="fs-24 color-gray-light">全场通用</p>
                        <p v-show="item.ProductCategoryIds||item.ProductIds||item.StoreIds" class="fs-24 color-gray-light">{{ item.StoreNames }}{{ item.StoreNames?',':'' }}{{ item.ProductNames||item.ProductCategoryNames }}</p>
                        <p
                          class="fs-24 color-gray-light"
                        >{{ item.UseStartTime }}-{{ item.UseEndTime }}</p>
                      </div>
                      <van-radio :name="index" class="pr-20 flex-s-0" />
                      <div class="pos-a remain-num fs-20">现有{{ item.RemainNum }}张</div>
                    </div>
                  </div>
                </li>
              </ul>
            </van-radio-group>
          </van-tab>
          <van-tab :title="'可兑换(' + changeList.length + ')'">
            <van-radio-group v-model="changeListRadio">
              <ul class="coupon-list mg-30 mb-0">
                <li
                  v-for="(item, index) in changeList"
                  :key="index"
                  class="coupon-item mb-30 flex-s-c"
                  @click="changeListRadio = index"
                >
                  <div class="item flex-s-c flex-1 br-12" :style="{backgroundImage:'url('+require('@/assets/images/coupon-li-bg.png')+')'}">
                    <div class="left-box  fs-72   flex-center ">
                      <div v-show="item.PrivilegeWay!==0" class="tac">
                        <span>{{ parseInt(item.PrivilegeValue) }}</span>
                        <span v-show="item.PrivilegeValue%1" class="fs-24">.{{ $utils.get_decimal(item.PrivilegeValue) }}</span>
                        <span class="fs-24">元</span>
                        <p v-show="item.OrderPrice" class="fs-24 mt--20">满{{ item.OrderPrice }}元使用</p>
                      </div>
                      <div v-show="item.PrivilegeWay===0" class="tac">
                        <span>{{ parseInt(item.PrivilegeValue/10) }}</span>
                        <span v-show="(item.PrivilegeValue/10)%1" class="fs-24">.{{ $utils.get_decimal(item.PrivilegeValue/10,1) }}</span>
                        <span class="fs-24">折</span>
                        <p v-show="item.OrderPrice" class="fs-24 mt--20">满{{ item.OrderPrice }}元使用</p>
                      </div>
                    </div>
                    <div class="right-box flex-s-c flex-1 pl-30 pr-20">
                      <div>
                        <h2 class="fs-32 fw-b lh text-show-line-1">{{ item.Name }}</h2>
                        <p
                          class="fs-24 color-gray-light"
                        >{{ item.UseStartTime }}-{{ item.UseEndTime }}</p>
                        <p class="fs-24 color-gray-light">所需{{ $IntegralAlias }}：{{ item.NeedIntegral }}</p>
                      </div>
                      <van-radio :name="index" class="pr-20 flex-s-0" />
                    </div>
                  </div>
                </li>
              </ul>
            </van-radio-group>
          </van-tab>
        </van-tabs>
        <div class="pb-30 flex-center mlr-30">
          <van-button
            class="color-primary bg-white flex-1 br-44 mr-20"
            native-type="submit"
            @click="noUseCoupon"
          >不使用优惠券</van-button>
          <van-button
            class="solid-btn flex-2 br-44 ml-20"
            native-type="submit"
            @click="choseCoupon"
          >确定</van-button>
        </div>
      </div>
    </van-popup>
    <!-- 优惠券e -->

    <!-- 支付方式s -->
    <van-popup
      v-model="showPayWay"
      position="bottom"
    >
      <div>
        <h2 class="fs-34 fw-600 tac dialog-title mb-30 mt-10">请选择支付方式</h2>
        <van-cell v-show="userAgent==='wechat'" clickable class="flex-s-c" @click="chosePayWay(4)">
          <template #title>
            <SvgIcon icon-class="wechatpay" class="mr-30 fs-40" />
            <span class="custom-title">微信支付</span>
          </template>
        </van-cell>
        <van-cell v-show="userAgent==='zfb'" clickable class="flex-s-c" @click="chosePayWay(5)">
          <template #title>
            <SvgIcon icon-class="alipay" class="mr-30 fs-40" />
            <span class="custom-title">支付宝支付</span>
          </template>
        </van-cell>
        <van-cell class="no-hb mb-50" clickable @click="chosePayWay(1)">
          <template #title>
            <SvgIcon icon-class="balance" class="mr-30 fs-40" />
            <span class="custom-title">余额支付（余额：{{ totalAssets }}）</span>
          </template>
        </van-cell>
        <div class="flex-center">
          <van-button class="solid-btn flex-g-1 br-6" @click="cancalPayWay">取消</van-button>
        </div>
      </div>
    </van-popup>
    <!-- 支付方式e -->

    <!-- 支付成功/支付失败提示弹窗s -->
    <van-dialog v-model="showPayResult" :show-confirm-button="false" class="pd-20">
      <div v-if="payState === 'success'">
        <van-icon
          name="cross"
          class="dialog-close right-20 pos-a"
          size="20"
          @click="paySuccess"
        />
        <div class="flex-center flex-d-c fs-32">
          <SvgIcon icon-class="paySuccess" class-name="fs-160 color-primary mt-20" />
          <p class="pb-60 color-primary">支付成功</p>
          <p class="fw-600 ls-4">付款金额￥{{ payMoney }}</p>
          <p class="fs-28 color-gray-light pb-40">
            此次支付获得
            <span class="color-second">{{ rewardIntegral }}{{ $IntegralAlias }}</span>
          </p>
        </div>
        <div class="flex-center pt-50">
          <van-button class="solid-btn flex-g-1 br-6" @click="openUserCard">{{ cardText }}</van-button>
        </div>
      </div>

      <div v-if="payState === 'fail'">
        <div class="flex-center flex-d-c fs-32">
          <SvgIcon icon-class="payFail" class-name="fs-160 color-danger mt-20" />
          <p class="pb-60 color-danger">支付失败</p>
        </div>
        <div class="flex-center pt-50">
          <van-button class="solid-btn-danger flex-g-1 br-6" @click="payfail()">请重新提交</van-button>
        </div>
      </div>
    </van-dialog>
    <!-- 支付成功/支付失败提示弹窗e -->
  </div>
</template>

<script>
import { Toast } from 'vant'
import SvgIcon from 'components/SvgIcon'
import cookies from 'vue-cookies'
import headPortraitBox from 'components/headPortraitBox'
import keyborad from 'components/keyborad'
import { GetUserCouponList, GetMaxDiscount } from 'api/coupon'
import { addOrder, PayBalance, CancleOrder } from 'api/order'
import { GetMemberCenterInfo } from 'api/member'
import { GetCashStoreInfo } from 'api/store'
export default {
  components: {
    SvgIcon,
    headPortraitBox,
    keyborad
  },
  data() {
    return {
      title: '', // 网页标题
      focusStatus: true,

      userCouponList: [], // 未使用
      userCouponListRadio: 0,
      changeList: [], // 可兑换
      changeListRadio: 0,
      active: 1, // 优惠券类目
      userCouponNum: 0, // 可使用优惠券的数量
      couponValue: '选择优惠券',

      // 商户信息
      storeInfo: {
        cardNumber: 0,
        logo: '',
        storeName: ''
      },

      price: '', // 输入的金额
      PrivilegeValue: 0, // 优惠金额
      totalAssets: 0, // 我的消费金
      integral: 0, // 我的班贝积分
      maxDiscount: '', // 最大折扣比例
      minOrderPrice: 0, // 优惠券使用门槛

      showCoupon: false, // 优惠券弹出层
      showPayWay: false, // 优惠券弹出层

      showPayResult: false, // 支付弹出层
      payState: undefined, // 支付状态
      payWay: 1,
      payWayName: '余额支付',
      payWayIcon: 'balance',

      userAgent: '',

      // 支付成功显示数据
      payMoney: 0,
      rewardIntegral: 0,
      cardText: '查看会员卡',

      // 请求上传数据
      requestData: { IsPayStore: true }, // 请求优惠券接口上传data
      requestData2: { PayWay: 1 }, // 请求订单创建接口上传data
      requestData3: {}, // 余额支付接口上传data
      requestData4: {} // 参数为商户id
    }
  },
  computed: {

    // 获取总价（保留两位小数）
    priceSum() {
      const priceSum = this.$utils.changePrice2money(this.price - this.PrivilegeValue > 0 ? this.price - this.PrivilegeValue : 0)
      return priceSum
    },
    // 获取最大优惠金额
    maxDiscountM() {
      const maxDiscountM = this.price * this.maxDiscount
      return this.$utils.changePrice2money(maxDiscountM)
    }
  },
  beforeDestroy() {
    this.$utils.changeTitle(this.title)
  },
  created() {
    this.title = document.title
    this.$utils.changeTitle('付款给商家')
    this.storeInfo.cardNumber = this.$route.params.id

    // 判断是否为支付后返回的页面
    if (this.$route.query.st) {
      console.log(1)
      const query = this.$route.query
      const st = query.st

      if (st === -1 || st === '-1') {
        // 支付失败返回
        console.log('shibai ')
        this.price = query.p
        this.payState = 'fail'
        this.showPayResult = true
        this.CancleOrder(query.oId)
      } else if (st === 1 || st === '1') {
      // 支付成功返回
        console.log('chenggong')
        // this.CheckApplyMemberCard()
        this.payMoney = query.pm
        this.rewardIntegral = query.rn
        this.payState = 'success'
        this.showPayResult = true
      }
    }
    if (this.$route.query.price) {
      this.price = this.$route.query.price
    }
    this.initPayWay()
    this.GetCashStoreInfo()
    console.log('test111')
  },
  mounted() {
    // this.$refs.mInput.focus()
    // console.log('test11')
  },
  methods: {
    removeCookie() {
      cookies.remove('AccessToken')
      this.$toast('清理成功')
    },
    // 初始化默认付款方式（微信用微信支付，支付宝用支付宝支付）
    initPayWay() {
      const _isWechat = this.$utils.wechat().isWechat
      const _isZFB = this.$utils.isZFB()
      const _isMinProgram = window.__wxjs_environment === 'miniprogram' && wx.miniProgram
      if (_isWechat || _isMinProgram) {
        this.userAgent = 'wechat'
        this.chosePayWay(4)
      } else if (_isZFB) {
        this.userAgent = 'zfb'
        this.chosePayWay(5)
      }
    },
    // 选择优惠券
    openCouponList() {
      this.focusStatus = false
      if (this.price === '') {
        Toast({
          message: '请先输入订单金额'
        })
        this.focusStatus = true
        return
      } else {
        this.requestData.PriceSum = this.price
        this.GetUserCouponList()
      }
    },
    // 获取优惠券列表
    GetUserCouponList() {
      GetUserCouponList(this.requestData).then(res => {
        let userCouponNum = 0
        for (let i = 0; i < res.Data.UserCouponList.length; i++) {
          res.Data.UserCouponList[i].UseStartTime = res.Data.UserCouponList[i].UseStartTime.replace(/-/g, '/')
          res.Data.UserCouponList[i].UseEndTime = res.Data.UserCouponList[i].UseEndTime.replace(/-/g, '/')
          res.Data.UserCouponList[i].UseStartTime = this.$utils.dateFomat('yyyy.mm.dd', new Date(res.Data.UserCouponList[i].UseStartTime))
          res.Data.UserCouponList[i].UseEndTime = this.$utils.dateFomat('yyyy.mm.dd', new Date(res.Data.UserCouponList[i].UseEndTime))
          userCouponNum += res.Data.UserCouponList[i].RemainNum
        }
        for (let i = 0; i < res.Data.ChangeList.length; i++) {
          res.Data.ChangeList[i].UseStartTime = res.Data.ChangeList[i].UseStartTime.replace(/-/g, '/')
          res.Data.ChangeList[i].UseEndTime = res.Data.ChangeList[i].UseEndTime.replace(/-/g, '/')
          res.Data.ChangeList[i].UseStartTime = this.$utils.dateFomat('yyyy.mm.dd', new Date(res.Data.ChangeList[i].UseStartTime))
          res.Data.ChangeList[i].UseEndTime = this.$utils.dateFomat('yyyy.mm.dd', new Date(res.Data.ChangeList[i].UseEndTime))
        }
        this.userCouponList = res.Data.UserCouponList
        this.changeList = res.Data.ChangeList
        this.userCouponNum = userCouponNum
        this.showCoupon = true
      })
    },
    // 不使用优惠券
    noUseCoupon() {
      this.userCouponListRadio = 0
      this.minOrderPrice = 0
      this.changeListRadio = 0
      this.PrivilegeValue = 0
      this.couponValue = '选择优惠券'
      this.requestData2.CouponDetailId = 0
      this.requestData2.CouponId = 0
      this.showCoupon = false
    },
    // 确定选择优惠券
    choseCoupon() {
      const list = this.active ? this.changeList : this.userCouponList
      const radio = this.active ? this.changeListRadio : this.userCouponListRadio
      if (radio >= 0) {
        console.log(radio)
        if (list[radio].PrivilegeWay === 0) {
          this.PrivilegeValue = ((1 - list[radio].PrivilegeValue / 100) * this.price).toFixed(2)
        } else {
          this.PrivilegeValue = list[radio].PrivilegeValue
        }

        this.couponValue = '-￥' + this.PrivilegeValue
        this.minOrderPrice = list[radio].OrderPrice || 0
        this.requestData2.CouponDetailId = list[radio].DetailId
        this.requestData2.CouponId = list[radio].CouponId
      }
      this.showCoupon = false
    },
    // 打开付款方式选择框
    openPayWay() {
      this.focusStatus = false
      this.showPayWay = true
    },
    // 取消选择付款的方式
    cancalPayWay() {
      this.showPayWay = false
    },
    // 选择付款方式
    chosePayWay(val) {
      this.payWay = val
      switch (parseInt(this.payWay)) {
        case 1:
          this.payWayName = '余额支付'
          this.payWayIcon = 'balance'
          break
        case 4:
          this.payWayName = '微信支付'
          this.payWayIcon = 'wechatPay'
          break
        case 5:
          this.payWayName = '支付宝支付'
          this.payWayIcon = 'alipay-1'
          break
      }
      this.requestData2.PayWay = parseInt(this.payWay)
      this.showPayWay = false
    },
    input(val) {
      this.price = val
      this.price = this.price.replace(/\.{2,}/g, '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
      const maxDiscountM = this.price * this.maxDiscount
      if ((maxDiscountM < this.PrivilegeValue && this.active === 1) || (this.minOrderPrice !== 0 && this.minOrderPrice > this.price && this.active === 0)) {
        this.noUseCoupon()
        this.$toast('订单金额低于当前优惠券使用门槛，请重新选择优惠券！')
      }
    },
    blur() {
      console.log('失焦')
    },
    openUserCard() {
      const url = this.$LocalDomain + '/m/user/usercard'
      window.location.href = url
    },
    paySuccess() {
      this.showPayResult = false
      this.payState = 'pay'
      // const path = this.$route.path
      const url = window.location.href.split('?')[0]
      if (url === window.location.href) {
        window.location.reload()
      } else {
        window.location.href = url
      }
    },
    payfail() {
      this.showPayResult = false
      this.payState = 'pay'
      // const path = this.$route.path
      const url = window.location.href.split('?')[0] + '?price=' + this.price
      window.location.href = url
    },
    // 获取会员中心信息
    GetMemberCenterInfo() {
      GetMemberCenterInfo().then(res => {
        if (res) {
          this.totalAssets = res.Data.TotalAssets
          this.integral = res.Data.Integral
        }
      })
    },

    // 获取商户信息
    GetCashStoreInfo() {
      GetCashStoreInfo({ cardNumber: this.$route.params.id }).then(res => {
        if (res) {
          this.storeInfo.logo = res.Data.Logo
          this.storeInfo.storeName = res.Data.StoreName
          this.requestData4.StoreId = res.Data.StoreId
          this.requestData.StoreId = res.Data.StoreId
          this.requestData2.StoreId = res.Data.StoreId
          this.GetMemberCenterInfo()
          this.GetMaxDiscount()
        }
      })
    },
    // 获取最大优惠比例
    GetMaxDiscount() {
      GetMaxDiscount(this.requestData4).then(res => {
        if (res) {
          this.maxDiscount = res.Data
        }
      })
    },
    // 添加订单
    addOrder(val) {
      this.price = val
      if (this.price === '' || parseFloat(this.price) <= 0) {
        Toast({
          message: '请先输入订单金额'
        })
        return
      } else {
        this.requestData2.PriceSum = this.price
        addOrder(this.requestData2).then(res => {
          if (res) {
            if (res) {
              const RES = res.Data
              // 微信支付
              if (parseInt(this.payWay) === 4 || parseInt(this.payWay) === 5) {
                const localtionUrl = window.location.href.split('?')[0]
                const localtionUrl_1 = this.$LocalDomain + '/m/home/union'
                const successUrl = localtionUrl_1 + '?pm=' + RES.PayMoney + '&rn=' + RES.RewardIntegral + '&st=1' + '&storeId=' + this.requestData2.StoreId
                const failUrl = localtionUrl + '?oId=' + RES.OrderId + '&p=' + this.price + '&st=-1'
                let url =
                  RES.WXPayUrl +
                  '&success_url=' +
                  encodeURIComponent(successUrl) +
                  '&fail_url=' +
                  encodeURIComponent(failUrl) +
                  '&cancel_url=' +
                  encodeURIComponent(failUrl)
                console.log(url)
                if (window.__wxjs_environment === 'miniprogram' && wx.miniProgram) {
                  url = '/pages/wxpay/wxpay?' + url.split('?')[1]
                  wx.miniProgram.navigateTo({ url: url })
                } else {
                  window.location.href = url // 非小程序环境直接跳转
                }
              } else if (parseInt(this.payWay) === 1) {
                this.rewardIntegral = RES.RewardIntegral
                this.payMoney = RES.PayMoney
                delete RES.RewardIntegral
                delete RES.WXPayUrl
                this.requestData3 = RES
                console.log(this.requestData3)
                this.PayBalance()
              }
            }
          }
        })
      }
    },
    // 余额支付
    PayBalance() {
      const _this = this
      PayBalance(_this.requestData3).then(res => {
        console.log(res)
        if (res) {
          console.log(res)
          console.log('支付成功')
          _this.payState = 'success'
          const success_back_url = this.$LocalDomain + '/m/home/union?pm=' + _this.payMoney + '&rn=' + _this.rewardIntegral + '&storeId=' + this.requestData2.StoreId
          window.location.href = success_back_url
        }
      })
    },
    // 取消订单
    CancleOrder(orderId) {
      CancleOrder({ OrderId: orderId }).then(res => {
        console.log(res)
        if (res) {
          console.log(res)
          console.log('取消成功')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content-box {
  padding-bottom: 484px;
  .bg-f9{
    background: #f9f9f9;
  }
  .input-box{
    position: relative;
    &:before{
      content: "￥";
      font-size: 40px;
      position: absolute;
      top: 14px;
      left: 0;
    }
    .input{
      border: none;
      padding-left: 40px;
      width: 100%;
      .focus{
        position: relative;
        padding-right:2px;
        &:after{
          position: absolute;
          content: " ";
          right: -4px;
          top: 0px;
          @include bg-primary;
          // letter-spacing: 58px;
          width: 4px;
          height: 70px;
          animation: cursor-blinks 1.5s infinite steps(1, start);
        }
      }
    }
  }
}
@keyframes cursor-blinks {
  0% {
    opacity: 1;
    display: block;
  }
  50% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
.arrow {
  padding-right: 20px;
  position: relative;
  &:after{
    right: 0;
    top: 12px;
  }
}
.arrow1:after{
  top: 48px;
}

.van-popup {
  border-radius: 30px 30px 0 0;
}
.coupon-box {
  /deep/.van-tabs__line {
    @include bg-primary();
  }
  /deep/.van-hairline--top-bottom:after {
    border-width: 0 0 2px 0;
  }
  /deep/.van-icon {
    @include border-primary();
  }
  /deep/.van-radio__icon--checked .van-icon {
    @include bg-primary();
    border-radius: 100%;
  }
  /deep/.van-button::before,/deep/.van-button{
    border-color: currentColor;
  }
}
/deep/.van-popup__close-icon {
  top: 10px;
}
.van-tabs__content {
  max-height: 500px;
}

.no-hb::after {
  content: '';
  border-bottom: 0;
}

/* 优惠券列表 */
.coupon-list {
  position: relative;
  max-height: 660px;
  overflow: scroll;
  .coupon-item {
    .item {
      width: 686px;
      height: 180px;
      background-size: 100% 100%;
      .left-box {
        width: 210px;
        height: 100%;
        color:#FDE8AE;
      }
    }
  }
}
.remain-num{
  bottom: 0;
  right: 30px;
}
/* 弹窗 */
.dialog-title {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    width: 20%;
    height: 0;
    border: 2px solid;
    @include border-primary;
    bottom: 0;
    left: 40%;
  }
}

</style>
